JavaScript es uno de los lenguajes de programación más importantes en el desarrollo web. Originalmente diseñado para añadir interactividad a las páginas web, ha evolucionado para convertirse en un lenguaje versátil que no solo se ejecuta en los navegadores, sino también en servidores y muchas otras plataformas. En este apartado, desglosaremos los conceptos clave y las partes más importantes que todo desarrollador debe conocer para trabajar eficazmente con JavaScript.
JavaScript es un lenguaje de programación interpretado y dinámico que se ejecuta directamente en el navegador del usuario. Es uno de los tres lenguajes esenciales de la web, junto con HTML (que estructura el contenido) y CSS (que estiliza la apariencia).
A diferencia de HTML y CSS, que son lenguajes descriptivos, JavaScript permite la creación de comportamientos interactivos en las páginas web, como responder a eventos de usuario, manipular elementos del DOM y realizar peticiones a servidores en segundo plano sin necesidad de recargar la página (Ajax).
Las variables son contenedores que almacenan información que puede cambiar durante la ejecución de un programa. En JavaScript, hay tres formas principales de declarar variables:
var: Declaración de variables con un alcance global o de función (legado, no recomendado para nuevo código).let: Introducido en ES6, permite declarar variables con alcance de bloque (recomendado).const: Declara variables de solo lectura que no pueden ser reasignadas.Ejemplo:
let nombre = "Juan";
const edad = 25;
var ciudad = "Madrid";
Tipos de datos en JavaScript:
number, string, boolean, undefined, null, symbol, bigint.Los operadores permiten realizar operaciones matemáticas, comparar valores, o realizar operaciones lógicas. Algunos operadores comunes incluyen:
+, -, *, /, %=, +=, -=, *=, /===, ===, !=, !==, <, >, <=, >=&&, ||, !Ejemplo de operador aritmético y de comparación:
let a = 5;
let b = 10;
let suma = a + b; // 15
console.log(a < b); // true
Las estructuras de control permiten modificar el flujo de ejecución de un programa en función de ciertas condiciones.
Condicionales (if, else, else if): Evalúan una condición y ejecutan un bloque de código si la condición es verdadera.
let hora = 10;
if (hora < 12) {
console.log("Buenos días");
} else {
console.log("Buenas tardes");
}
Bucles (for, while): Recorren colecciones de datos o repiten una operación hasta que una condición sea falsa.
for (let i = 0; i < 5; i++) {
console.log("Número: " + i);
}
Switch: Alternativa para comparar una expresión contra múltiples valores.
let dia = 3;
switch (dia) {
case 1: console.log("Lunes"); break;
case 2: console.log("Martes"); break;
default: console.log("Día desconocido");
}
Las funciones son bloques reutilizables de código que ejecutan una tarea específica. Pueden recibir parámetros y devolver un valor. Existen diversas formas de declarar funciones en JavaScript:
Declaración de función:
function saludar(nombre) {
return "Hola, " + nombre;
}
Funciones anónimas y funciones flecha (introducidas en ES6):
const saludar = (nombre) => "Hola, " + nombre;
Las funciones son fundamentales porque permiten la modularidad y reutilización del código.
JavaScript es un lenguaje orientado a objetos, y los objetos son fundamentales para organizar datos complejos.
Objetos: Son colecciones de pares clave-valor.
let persona = {
nombre: "Ana",
edad: 30,
saludar: function() {
return "Hola, soy " + this.nombre;
}
};
console.log(persona.saludar()); // "Hola, soy Ana"
Arrays: Son listas ordenadas de elementos, que pueden ser manipuladas con métodos como .push(), .pop(), .map(), entre otros.
let frutas = ["manzana", "banana", "naranja"];
console.log(frutas[0]); // "manzana"
JavaScript permite que las páginas web respondan a eventos como clics, teclas presionadas, o el desplazamiento del mouse. Esto se hace posible con el uso de listeners de eventos, lo cual proporciona interactividad a las páginas web.
Ejemplo de un listener de eventos:
document.getElementById("miBoton").addEventListener("click", function() {
alert("Has hecho clic en el botón");
});
El DOM (Document Object Model) es una representación de la estructura HTML de una página. JavaScript puede interactuar con el DOM para cambiar el contenido, estilos y estructura de una página web de forma dinámica.
Ejemplo:
document.getElementById("titulo").textContent = "Nuevo Título";
Con este código, podemos cambiar el texto de un elemento con el id="titulo".
JavaScript es un lenguaje asincrónico, lo que significa que puede realizar operaciones sin bloquear el flujo del programa. Esto es especialmente útil al interactuar con APIs o al realizar operaciones como la carga de datos desde un servidor.
Callbacks: Son funciones que se pasan como argumento y se ejecutan después de una operación asincrónica.
Promesas: Introducidas en ES6, las promesas son un mecanismo para manejar asincronía de manera más estructurada.
Ejemplo de una promesa:
let promesa = new Promise(function(resolve, reject) {
let exito = true;
if (exito) {
resolve("Operación exitosa");
} else {
reject("Ocurrió un error");
}
});
promesa.then(function(mensaje) {
console.log(mensaje);
}).catch(function(error) {
console.log(error);
});
Para hacer el manejo de asincronía más intuitivo, ES8 introdujo las palabras clave async y await, que permiten escribir código asincrónico de manera más clara y secuencial.
Ejemplo:
async function obtenerDatos() {
let respuesta = await fetch('https://fakestoreapi.com/products');
let datos = await respuesta.json();
console.log(datos);
}
JavaScript es un lenguaje versátil y esencial para el desarrollo web moderno. Desde la manipulación del DOM hasta el manejo de eventos y asincronía, JavaScript permite a los desarrolladores crear experiencias web interactivas y dinámicas. Entender sus partes esenciales te permitirá construir aplicaciones web más eficientes y enriquecedoras.